<template>
    <div class="editor-container">
        <component v-if="isModelShow"  :is="'model-editor-'+modelName"  :row-index="rowIndex" :row-type="rowType" :model-id="modelId" :model-index="modelIndex" :param="modelParam" ></component>
    </div>
</template>

<script>
import {list} from './modelList.js';

let components = {};

for (let key in list){
    components['model-editor-'+key] = list[key].editor;
}

export default {
    components,
    data() {
        return {
            rowIndex:undefined,
            rowType:'',
            modelIndex:undefined,
            modelId:'',
            modelName:'',
            modelParam:{},
            isModelShow: false,
        }
    },
    methods: {
        showModel(rowIndex,rowType,modelIndex,modelId,name,param){
            
            if (modelId == this.modelId && this.rowIndex == rowIndex) return;
            this.modelId = modelId;
            
            this.isModelShow = false;
            this.rowIndex = rowIndex;
            this.rowType = rowType;
            this.modelName = name;
            this.modelIndex = modelIndex;
            this.modelParam = param;
            
            this.$nextTick(()=>{
                this.isModelShow = true;
            });
        },
        hideModel(){
            this.modelId = '';
            this.isModelShow = false;
        },
    }
}

</script>

<style>
.editor-container{
    padding: 10px;
}

.editor-container .form-item-label{
    font-size: 14px;
}
</style>